<template>
  <div>
    <el-card class="box-card" style="margin-bottom:20px;">
      <div slot="header">
        <h4>重点工作责任单位统计</h4>
      </div>
      <div>
        <div class="selectData search">
          <span style="margin-left:20px;margin-right:6px;font-size:14px;"
            >重点工作:</span
          >
          <el-select
            v-model="taskId"
            placeholder="请选择"
            @change="getTaskId()"
          >
            <el-option
              v-for="(item, index) in focusArray"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-cascader
            ref="taskRef"
            class="userIntSize"
            v-model="taskId"
            :options="taskLists"
            :props="taskProp"
            size="small"
            :show-all-levels="false"
            @change="getTaskId"
          >
          </el-cascader> -->
        </div>
        <div class="selectData">
          <ul class="focus">
            <li class="coor1">
              <span>
                <i>市级部门</i>
                <b>{{ Array1 }}</b>
              </span>
              <p></p>
            </li>
            <li class="coor2">
              <span>
                <i>区县</i>
                <b>{{ Array2 }}</b>
              </span>
              <p></p>
            </li>
            <li class="coor3">
              <span>
                <i>西咸新区</i>
                <b>{{ Array3 }}</b>
              </span>
              <p></p>
            </li>
            <li class="coor4">
              <span>
                <i>开发区</i>
                <b>{{ Array4 }}</b>
              </span>
              <p></p>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
    <div class="topTop">
      <div class="topTopLeft">
        <el-card class="box-card">
          <div slot="header">
            <h4>责任单位重点工作任务量统计</h4>
          </div>
          <div>
            <div>
              <echartsThreeTow></echartsThreeTow>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h4>党政一把手评价排名</h4>
        </div>
        <div>
          <div>
            <echartsThreefour></echartsThreefour>
          </div>
        </div>
      </el-card>
    </div> -->
    <div style="margin-top:20px;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h4>责任单位综合考核结果</h4>
        </div>
        <div>
          <div>
            <echartsThreeSix></echartsThreeSix>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import echartsThreeOne from "./conponents/echartsThreeOne";
import echartsThreeTow from "./conponents/echartsThreeTow";
import echartsThreethree from "./conponents/echartsThreethree";
import echartsThreefour from "./conponents/echartsThreefour";
import echartsThreeSix from "./conponents/echartsThreeSix";

export default {
  data() {
    return {
      quarter: "",
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "第四季度" }
      ],
      tableData: [],
      tableDataboy: [],
      taskId: 1,
      isActive: 0,
      quarter01: "",
      tasksList: [],
      taskProp: {
        label: "name",
        value: "id",
        children: "children"
      },
      taskLists: [],
      taskTableData: [],
      Array1: "0",
      Array2: "0",
      Array3: "0",
      Array4: "0",
      focusArray: [
        {
          id: 14,
          name: "全部",
          Array1: "57",
          Array2: "13",
          Array3: "1",
          Array4: "7"
        },
        {
          id: 1,
          name: "三个经济",
          Array1: "20",
          Array2: "13",
          Array3: "1",
          Array4: "4"
        },
        {
          id: 2,
          name: "绿色发展",
          Array1: "17",
          Array2: "13",
          Array3: "1",
          Array4: "7"
        },
        {
          id: 3,
          name: "迎十四运",
          Array1: "15",
          Array2: "13",
          Array3: "0",
          Array4: "7"
        },
        {
          id: 4,
          name: "营商环境",
          Array1: "38",
          Array2: "13",
          Array3: "1",
          Array4: "7"
        },
        {
          id: 5,
          name: "重大项目",
          Array1: "10",
          Array2: "13",
          Array3: "1",
          Array4: "7"
        },
        {
          id: 6,
          name: "先进制造业",
          Array1: "5",
          Array2: "13",
          Array3: "1",
          Array4: "5"
        },
        {
          id: 7,
          name: "文旅融合",
          Array1: "22",
          Array2: "13",
          Array3: "1",
          Array4: "7"
        },
        {
          id: 8,
          name: "教育强市",
          Array1: "14",
          Array2: "13",
          Array3: "1",
          Array4: "7"
        },
        {
          id: 9,
          name: "交通优化提升",
          Array1: "10",
          Array2: "7",
          Array3: "0",
          Array4: "6"
        },
        {
          id: 10,
          name: "卫生健康事业",
          Array1: "12",
          Array2: "13",
          Array3: "1",
          Array4: "7"
        },
        {
          id: 11,
          name: "乡村振兴",
          Array1: "14",
          Array2: "8",
          Array3: "1",
          Array4: "2"
        },
        {
          id: 12,
          name: "第九项任务",
          Array1: "5",
          Array2: "12",
          Array3: "1",
          Array4: "4"
        },
        {
          id: 13,
          name: "人才科创",
          Array1: "13",
          Array2: "13",
          Array3: "1",
          Array4: "7"
        }
      ]
    };
  },
  mounted() {
    this.getTaskList();
   
     this.getTaskId()
  },
  methods: {
    showActive(text) {
      this.isActive = text;
    },
    // 获取相关任务量
    getNumber() {
      this.$axios
        .post("/deptTask/getDeptTypeTaskNum", { taskId: this.taskId })
        .then(res => {
          if (res.code == 200) {
            this.Array1 = res.data[0].deptTypeTaskNum;
            this.Array2 = res.data[1].deptTypeTaskNum;
            this.Array3 = res.data[2].deptTypeTaskNum;
            this.Array4 = res.data[3].deptTypeTaskNum;
          }
        })
        .catch(err => {});
    },
    // 时刻获取十项重点工作
    getTaskId(val) {
      this.focusArray.forEach((item, index) => {
        if (item.id == this.taskId) {
          this.Array1 = this.focusArray[index].Array1;
          this.Array2 = this.focusArray[index].Array2;
          this.Array3 = this.focusArray[index].Array3;
          this.Array4 = this.focusArray[index].Array4;
        }
      });

      console.log(this.Array1);
      // if (val) {
      //   this.taskId = this.$refs["taskRef"].getCheckedNodes()[0].value;
      //   let _val = val;
      //   console.log(_val);
      //   if (!Array.isArray(_val)) {
      //     _val = [_val];
      //   }
      //   this.taskId = _val[_val.length - 1];
      //   this.getNumber();
      // }
    },
    // 获取十项重点工作
    getTaskList() {
      this.$axios
        .post("/task/getList")
        .then(res => {
          res.data.unshift({
            applicatName: "admin",
            children: [],
            departmentName: "全部",
            id: 0,
            name: "全部",
            number: "000",
            year: 2020
          });

          res.data.map(item => {
            if (item.children.length == 0) {
              item.children = undefined;
            }
            this.taskLists = res.data;
          });
        })
        .catch(err => {});
    }
  },
  components: {
    echartsThreeOne: echartsThreeOne,
    echartsThreeTow: echartsThreeTow,
    echartsThreethree: echartsThreethree,
    echartsThreefour: echartsThreefour,
    echartsThreeSix: echartsThreeSix
  }
};
</script>
<style lang="less" scoped>
.userIntSizes {
  width: 20% !important;
}
.topTop {
  width: 100%;
  height: auto;
  // margin-top: 20px;
  overflow: hidden;
}
.topTop > div {
  float: left;
}
.topTopLeft {
  width: 100%;
  height: 660px;
}
.topTopRight {
  width: 38%;
  height: 560px;
  margin-left: 20px;
}
.search {
  width: 600px;
  height: 40px;
  margin: 0 auto;
}
.selectData {
  display: flex;
  justify-content: center;
  align-items: center;
}
.focus {
  // width: 100%;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 10px;
  > li {
    float: left;
    margin-left: 20px;
    width: 240px;
    height: 100px;
    border-radius: 4px;
    > span {
      float: left;
      width: 160px;
      height: 100%;
      > i {
        display: inline-block;
        font-size: 12px;
        color: #fff;
        font-style: normal;
        margin-top: 26px;
        margin-left: 30px;
      }
      > b {
        display: block;
        font-size: 16px;
        color: #fff;
        margin-top: 10px;
        margin-left: 30px;
      }
    }
    > p {
      float: right;
      width: 54px;
      height: 50px;
      background: url("../../assets/img/1.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 26px;
      margin-top: 20px;
    }
  }
  li.coor2 > p {
    background: url("../../assets/img/2.png") no-repeat;
    background-size: 100% 100%;
  }
  li.coor3 > p {
    background: url("../../assets/img/3.png") no-repeat;
    background-size: 100% 100%;
  }
  li.coor4 > p {
    background: url("../../assets/img/4.png") no-repeat;
    background-size: 100% 100%;
  }
  .both {
    > span {
      > i {
        display: inline-block;
        font-size: 12px;
        color: #fff;
        font-style: normal;
        > em {
          display: inline-block;
          font-style: normal;
          font-size: 16px;
          font-weight: 600;
          margin-left: 4px;
        }
      }
    }
  }
}
.coor1 {
  background: url("../../assets/img/color_1.png") no-repeat;
  background-size: 100% 100%;
}
.coor2 {
  background: url("../../assets/img/color_2.png") no-repeat;
  background-size: 100% 100%;
}
.coor3 {
  background: url("../../assets/img/color_3.png") no-repeat;
  background-size: 100% 100%;
}
.coor4 {
  background: url("../../assets/img/color_4.png") no-repeat;
  background-size: 100% 100%;
}
</style>
